<template>
  <div class="search-goods">
    <Heads types="search" title="快速索引"></Heads>

    <!-- 搜索框 -->
    <van-sticky :offset-top="40">
      <search-input @search-change="searchGoods" @search-click="searchGoods"></search-input>
    </van-sticky>

    <!-- 显示区域 -->
    <div class="content">
      <div v-if="searchList.length>0">
        <div v-for="item in searchList" :key="'search'+value+item.goods_id">
          <router-link
            :to="{name: 'Classify-details-tradeItemId',params: { 'tradeItemId': item.goods_id }}"
          >
            <van-card
              style="text-align: left;"
              :thumb="item.goods_info.picture"
              :price="item.goods_info.price | decimalPoint"
              origin-price="999.00"
            >
              <div
                slot="title"
                class="van-ellipsis title"
              >{{item.goods_info.title}}</div>
              <div slot="desc">
                <p>颜色: {{item.sku.tree[0].v[0].name}} | {{item.sku.tree[0].v[1].name}}</p>
                <p>尺寸: {{item.sku.tree[1].v[0].name}} | {{item.sku.tree[1].v[1].name}}</p>
              </div>
            </van-card>
          </router-link>
        </div>
      </div>
      <van-empty
        v-else
        class="custom-image"
        image="https://img.yzcdn.cn/vant/custom-empty-image.png"
        description="暂无符合要求的商品,快去搜索吧"
      />
    </div>
  </div>
</template>

<script>
// import http from 'axios'
import { mapState, mapMutations } from "vuex";
import SearchInput from "@/components/SearchInput";

import Vue from "vue";
import { NavBar, Icon, Card, Empty, Sticky } from "vant";
Vue.use(NavBar)
  .use(Icon)
  .use(Card)
  .use(Empty)
  .use(Sticky);

export default {
  data() {
    return {
      value: ""
    };
  },
  components: {
    SearchInput
  },
  computed: {
    ...mapState("goodsModule", ["goodsList"]),
    searchList: {
      get: function() {
        if (this.value) {
          return this.goodsList.filter(item => {
            return item.goods_info.title.includes(this.value);
          });
        } else {
          return [];
        }
      },
      set: function() {}
    }
  },
  methods: {
    ...mapMutations("footerModule", ["FOOTERSHOW"]),
    searchGoods(val) {
      this.value = val;
    }
  },
  mounted() {
    this.FOOTERSHOW(false);
  },
  destroyed() {
    this.FOOTERSHOW(true);
  }
};
</script>

<style lang="scss" scoped>
.search-goods {
  .content {
    margin: 8px 4px;
    height: 80vh;
    overflow-y: auto;
  }
}
.title {
  padding: 4px 0;
}
</style>
